import React, { useRef, useEffect } from 'react'
import { PageContainer } from '@ant-design/pro-layout'
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import { Button, Tag, Space, Menu, Dropdown } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getPerson } from '@/services/person';
import { connect } from 'umi'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
]

// const personsList = async () => {
//   // 发起请求获取数据
//   const data = await getPerson();
//   console.log(data);
//   return { data }
// }

// const data = [
//   { id: 1, name: 'tom', age: 11 },
//   { id: 2, name: 'lili', age: 22 },
// ]

const Person = (props) => {
  const actionRef = useRef<ActionType>();

  console.log(props);

  const { dispatch } = props

  useEffect(() => {
    // 调用model
    dispatch({
      type: 'person/fetchPersons',
      payload: null
    })
  }, [])

  const personsList = async () => {

    const data = props.person.person.persons
    return { data }
  }

  return (
    <PageContainer>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        dataSource={props.person.person.persons}
        // request={async (params: {} = {}) => ({ data })}
        // request={async (params: {} = {}) => personsList()}
        // request={async (params = {}, sort, filter) => {
        //   console.log(sort, filter);
        //   return request<{
        //     data: GithubIssueItem[];
        //   }>('https://proapi.azurewebsites.net/github/issues', {
        //     params,
        //   });
        // }}
        editable={{
          type: 'multiple',
        }
        }
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        pagination={{
          pageSize: 5,
        }}
        dateFormatter="string"
        headerTitle="高级表格"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary">
            新建
        </Button>
        ]}
      />
    </PageContainer>
  )
}

export default connect((person) => ({ person }))(Person)
